<template>
    <el-dialog title="客户审核" :visible="visible" width="600px" :show-close="true" @close="handleClose"
        :close-on-click-modal="false">
        <el-form ref="auditForm" :model="formData" :rules="rules" label-width="120px" size="small">

            <el-divider content-position="left">基本信息</el-divider>
            <el-form-item label="客户姓名">
                <span>{{ customerInfo.cusName || '--' }}</span>
            </el-form-item>

            <el-form-item label="手机号">
                <span>{{ customerInfo.cusPhone || '--' }}</span>
            </el-form-item>

            <el-form-item label="身份证号">
                <span>{{ customerInfo.idCardNo || '--' }}</span>
            </el-form-item>

            <el-form-item label="当前状态">
                <el-tag :type="getStatusTagType(customerInfo.customerStatus)">
                    {{ getStatusText(customerInfo.customerStatus) }}
                </el-tag>
            </el-form-item>

            <el-divider content-position="left">审核信息</el-divider>

            <el-form-item label="审核状态" prop="customerStatus">
                <el-select v-model="formData.customerStatus" placeholder="请选择审核状态" style="width: 100%">
                    <el-option label="审核中" value="AUDITING" />
                    <el-option label="已实名" value="AUTHED" />
                    <el-option label="已企业认证" value="ENT_AUTHED" />
                </el-select>
            </el-form-item>

            <el-form-item label="客户标签" prop="tag">
                <el-select v-model="formData.tag" placeholder="请选择客户标签" style="width: 100%">
                    <el-option label="客户" value="CUSTOMER" />
                    <el-option label="代理商" value="AGENT" />
                    <el-option label="推荐人" value="REFEREE" />
                </el-select>
            </el-form-item>

            <el-form-item label="保证金标准" prop="retainerStandard">
                <el-input-number v-model="formData.retainerStandard" :min="0" :precision="2" :step="100"
                    style="width: 100%" placeholder="请输入保证金标准" />
            </el-form-item>

            <el-form-item label="最大交易克数" prop="maxTradeLimit">
                <el-input-number v-model="formData.maxTradeLimit" :min="0" :precision="2" :step="1" style="width: 100%"
                    placeholder="请输入最大交易克数" />
            </el-form-item>

            <el-form-item label="客户等级" prop="grade">
                <el-select v-model="formData.grade" placeholder="请选择客户等级" style="width: 100%">
                    <el-option label="普通客户" value="NORMAL" />
                    <el-option label="VIP客户" value="VIP" />
                    <el-option label="钻石客户" value="DIAMOND" />
                </el-select>
            </el-form-item>

            <el-form-item label="推荐人ID" prop="refereeId">
                <el-input v-model="formData.refereeId" placeholder="请输入推荐人ID（可选）" clearable />
            </el-form-item>

            <el-form-item label="客户备注" prop="introduction">
                <el-input v-model="formData.introduction" type="textarea" :rows="3" placeholder="请输入客户备注信息"
                    maxlength="500" show-word-limit />
            </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" @click="handleSubmit" :loading="submitLoading">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
import { auditCustomer,getCustomerDetail } from '../api/customer'

export default {
    name: 'AuditDialog',
    data() {
        return {
            customerInfo: {},
            visible: false,
            submitLoading: false,
            formData: {
                cusId: '',
                customerStatus: '',
                tag: '',
                retainerStandard: 0,
                maxTradeLimit: 0,
                grade: 'NORMAL',
                refereeId: '',
                introduction: ''
            },
            rules: {
                customerStatus: [
                    { required: true, message: '请选择审核状态', trigger: 'change' }
                ],
                tag: [
                    { required: true, message: '请选择客户标签', trigger: 'change' }
                ],
                // retainerStandard: [
                //     { required: true, message: '请输入保证金标准', trigger: 'blur' }
                // ],
                // maxTradeLimit: [
                //     { required: true, message: '请输入最大交易克数', trigger: 'blur' }
                // ],
                // grade: [
                //     { required: true, message: '请选择客户等级', trigger: 'change' }
                // ]
            }
        }
    },
    methods: {
        open(row) {
            this.visible = true;
            this.getCustomerInfo(row);
        },
        getCustomerInfo(id) {
            getCustomerDetail(id).then(res => {
                this.customerInfo = res;
                this.initFormData();
            })
        },
        initFormData() {
            // 初始化表单数据
            this.formData = {
                cusId: this.customerInfo.cusId,
                customerStatus: this.customerInfo.customerStatus || '',
                tag: this.customerInfo.tag || '',
                retainerStandard: this.customerInfo.retainerStandard || 0,
                maxTradeLimit: this.customerInfo.maxTradeLimit || 0,
                grade: this.customerInfo.grade || 'NORMAL',
                refereeId: this.customerInfo.refereeId || '',
                introduction: this.customerInfo.introduction || ''
            }

            // 重置表单验证
            this.$nextTick(() => {
                if (this.$refs.auditForm) {
                    this.$refs.auditForm.clearValidate()
                }
            })
        },

        getStatusText(status) {
            const statusMap = {
                'AUDITING': '审核中',
                'AUTHED': '已实名',
                'ENT_AUTHED': '已企业认证'
            }
            return statusMap[status] || '未知状态'
        },

        getStatusTagType(status) {
            const typeMap = {
                'AUDITING': 'warning',
                'AUTHED': 'success',
                'ENT_AUTHED': 'primary'
            }
            return typeMap[status] || 'info'
        },

        handleClose() {
            this.visible = false;
            this.customerInfo = {};
            this.formData = {
                cusId: '',
                customerStatus: '',
                tag: '',
                retainerStandard: 0,
                maxTradeLimit: 0,
                grade: 'NORMAL',
                refereeId: '',
                introduction: ''
            }
        },

        handleSubmit() {
            this.$refs.auditForm.validate((valid) => {
                if (valid) {
                    this.submitAudit()
                }
            })
        },

        async submitAudit() {
            try {
                this.submitLoading = true
                const response = await auditCustomer(this.formData)
                this.$message.success('审核提交成功')
                this.$emit('refresh')
                this.handleClose()
            } catch (error) {
                console.error('审核提交错误:', error)
            } finally {
                this.submitLoading = false
            }
        }
    }
}
</script>

<style scoped>
.el-divider {
    margin: 20px 0;
}

.el-form-item {
    margin-bottom: 18px;
}

.dialog-footer {
    text-align: right;
}

:deep(.el-input-number) {
    width: 100%;
}

:deep(.el-select) {
    width: 100%;
}
</style>
